﻿
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Dynamic Heart Shape</title>  
    <style>  
        body, html {  
            margin: 0;  
            padding: 0;  
            height: 100%;  
            display: flex;  
            flex-direction: column;  
            justify-content: center; /* 垂直居中 */  
            align-items: center; /* 水平居中（虽然这里不需要） */  
            text-align: center; 
            font-family: curlz mt;
			color: rgb(203, 77, 109);
			background-color: rgb(241, 184, 237);/* 使标题水平居中 */  
        }  
        #title {  
            font-size: 100px; /* 设置标题字体大小为100px */  
            margin-bottom: 20px; /* 添加一些底部间距，使标题和画布不紧贴 */  
        }  
        canvas {  
            display: block; /* 移除canvas底部的空白间隙 */  
        }  
    </style>  
</head>  
<body>  
    <div id="title">helloopenharmony</div>  
    <canvas id="heartCanvas"></canvas>  
    <script>  
        const canvas = document.getElementById('heartCanvas');  
        const ctx = canvas.getContext('2d');  
        canvas.width = window.innerWidth;  
        canvas.height = window.innerHeight - 120; // 减去标题和间距的总高度，防止重叠  
  
        const settings = {  
            particles: {  
                size: 2, // Particle size  
                count: 100, // Number of particles  
                speed: 0.05, // Speed of particles  
            },  
        };  
  
        let particles = [];  
        let angle = 0;  
  
        function createParticle() {  
            return {  
                x: Math.random() * canvas.width,  
                y: Math.random() * canvas.height,  
                vx: (Math.random() - 0.5) * settings.particles.speed,  
                vy: (Math.random() - 0.5) * settings.particles.speed,  
                size: settings.particles.size,  
            };  
        }  
  
        function initParticles() {  
            particles = [];  
            for (let i = 0; i < settings.particles.count; i++) {  
                particles.push(createParticle());  
            }  
        }  
  
        function drawHeart() {  
            ctx.clearRect(0, 0, canvas.width, canvas.height);  
            ctx.beginPath();  
            ctx.moveTo(canvas.width / 2, canvas.height / 2);  
            for (let t = 0; t < Math.PI * 2; t += 0.01) {  
                const x = 16 * Math.pow(Math.sin(t), 3);  
                const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));  
                ctx.lineTo(canvas.width / 2 + x * 20, canvas.height / 2 - y * 20);  
            }  
            ctx.closePath();  
            ctx.strokeStyle = 'rgba(255, 0, 255, 0.5)';  
            ctx.stroke();  
        }  
  
        function updateParticles() {  
            for (let particle of particles) {  
                particle.x += particle.vx;  
                particle.y += particle.vy;  
  
                // Bounce particles off the walls  
                if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;  
                if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;  
  
                // Draw particles  
                ctx.beginPath();  
                ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);  
                ctx.fillStyle = 'rgba(255, 0, 255, 0.7)';  
                ctx.fill();  
            }  
        }  
  
        function animate() {  
            drawHeart();  
            updateParticles();  
            requestAnimationFrame(animate);  
        }  
  
        initParticles();  
        animate();  
  
        // Resize canvas when window is resized  
        window.addEventListener('resize', () => {  
            canvas.width = window.innerWidth;  
            canvas.height = window.innerHeight - 120; // 保持减去标题和间距的总高度的逻辑  
            initParticles(); // Reinitialize particles to fit new canvas size  
        });  
    </script>  
</body>  
</html>